<template>
  <div class="relation-select-dlg">
    <van-nav-bar class="header"
      left-arrow
      @click-left="onBack()"
    >
      <template #title>
        <p style="font-size: 16px;color: #333333;font-weight: 400;">{{form.formName}}</p>
      </template>
      <template #left>
        <van-icon name="arrow-left" size="18" color="#3B3938" />
      </template>
    </van-nav-bar>
    <online-filter-box style="background: white; padding: 0px 18px;"
      @reset="onReset()"
      @refresh="onRefresh()"
    >
      <!-- 排序字段 -->
      <van-icon slot="sort" v-for="sortItem in sortList" :key="sortItem.id"
        class="sort-item" name="sort" color="#707070" size="13px"
      >
        {{ sortItem.showName }}
      </van-icon>
      <!-- 过滤字段 -->
      <online-custom-block subWidgetClass="filter-item"
        :widgetList="filterWidgetList"
      />
    </online-filter-box>
    <CustomList ref="cardList"
      style="padding: 0px 16px; flex-grow: 1;"
      :loadData="loadTableData"
    >
      <!-- 列表卡片 -->
      <online-image-card slot-scope="scope" :widget="cardWidget"
        style="background: white; margin: 15px 0px;"
        :parentWidget="queryTable"
        :rowData="scope.data" :masterTable="masterTable"
        :supportSelect="true"
        :isSelect="isSelect(scope.data)"
        @select="onSelectChange"
      />
    </CustomList>
    <van-row class="menu-box" type="flex" justify="space-between" align="center">
      <van-button size="normal" style="width: 104px; height: 40px;" @click="onBack()">取消</van-button>
      <van-button size="normal" style="width: 100%; margin-left: 8px; height: 40px;" color="#FF7700" @click="onSubmit()">保存</van-button>
    </van-row>
  </div>
</template>

<script>
import CustomList from '@/components/CustomList.vue';
import { OnlineFormMixins } from './onlineFormMixins.js';

export default {
  name: 'relationQueryForm',
  props: {
    value: {
      type: [Number, String, Array]
    },
    rowKey: {
      type: String,
      default: 'deptId'
    },
    formConfig: {
      type: Object
    }
  },
  components: {
    CustomList
  },
  mixins: [OnlineFormMixins],
  provide () {
    return {
      form: () => {
        return {
          ...this.form,
          getWidgetValue: this.getWidgetValue,
          getWidgetVisible: this.getWidgetVisible,
          onValueChange: this.onValueChange,
          onWidgetValueChange: this.onWidgetValueChange,
          getDictDataList: this.getDictDataList,
          getDropdownParams: this.getDropdownParams,
          getPrimaryData: this.getPrimaryData,
          masterTable: this.masterTable
        }
      }
    }
  },
  data () {
    return {
      // 选中项
      selectItemList: []
    }
  },
  methods: {
    onBack (refresh = false) {
      this.$emit('close', refresh, this.selectItemList);
    },
    onSubmit () {
      this.onBack(true);
    },
    onReset () {
      this.formFilter.deptName = undefined;
      this.filterWidgetList.forEach(widget => {
        this.onValueChange(widget, undefined);
      });
      this.onRefresh();
    },
    onRefresh () {
      if (this.$refs.cardList) this.$refs.cardList.reset();
    },
    async loadTableData (pageNum) {
      try {
        let table = this.queryTable.table;
        if (table.relation == null) {
          throw new Error('未配置关联表');
        }
        let params = {
          pageParam: {
            pageNum: pageNum,
            pageSize: 20
          }
        }
        params.datasourceId = table.datasource.datasourceId;
        params.filterDtoList = this.getQueryParams(this.filterWidgetList);
        if (this.queryTable.relation != null) {
          params.relationId = table.relation.relationId;
        }
        // 脱敏设置
        params.ignoreMaskFields = this.getIgnoreMaskFields(this.queryTable);
        if (typeof this.queryTable.eventInfo[this.OnlineFormEventType.BEFORE_LOAD_TABLE_DATA] === 'function') {
          params = await this.queryTable.eventInfo[this.OnlineFormEventType.BEFORE_LOAD_TABLE_DATA](params);
        }
        if (params == null) {
          throw new Error('取消加载数据');
        }
        let res = await this.doUrl('/admin/online/onlineOperation/listByOneToManyRelationId/' + table.datasource.variableName, 'post', params);

        if (typeof this.queryTable.eventInfo[this.OnlineFormEventType.AFTER_LOAD_TABLE_DATA] === 'function') {
          res.data.dataList = await this.queryTable.eventInfo[this.OnlineFormEventType.AFTER_LOAD_TABLE_DATA](res.data.dataList);
        }

        return {
          dataList: res.data.dataList,
          totalCount: res.data.totalCount
        };
      } catch (e) {
        console.error(e);
        throw e;
      }
    },
    isSelect (data) {
      if (data == null) return false;
      let find = false;
      for (let i = 0; i < this.selectItemList.length; i++) {
        if (this.selectItemList[i] === data) {
          find = true;
          break;
        }
      }
      return find;
    },
    onSelectChange (data, val) {
      this.selectItemList = [data];
    }
  },
  computed: {
    form () {
      return this.buildFormConfig(this.formConfig);
    },
    queryTable () {
      return this.formConfig.tableWidget;
    },
    cardWidget () {
      return this.queryTable.childWidgetList[0];
    },
    filterWidgetList () {
      return this.queryTable.childWidgetList.slice(1);
    },
    sortList () {
      return this.queryTable.props.orderList;
    }
  },
  created () {
    this.isReady = false;
    this.initPage();
    this.initFormWidgetList();
    if (typeof this.form.eventInfo[this.OnlineFormEventType.AFTER_CREATE_FORM] === 'function') {
      this.form.eventInfo[this.OnlineFormEventType.AFTER_CREATE_FORM]();
    }
    this.initWidgetLinkage(this.form.formType);
    this.isReady = true;
  }
}
</script>

<style scoped>
  .relation-select-dlg {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #F6F7F9;
  }
  .menu-box {
    flex-grow: 0;
    flex-shrink: 0;
    width: 100%;
    padding: 16px;
    flex-wrap: nowrap;
    background: white;
    box-sizing: border-box;
  }
  .menu-box >>> .van-radio__label {
    font-size: 14px;
    color: #666666;
  }
  .van-icon-sort:before {
    content: none;
  }
  .sort-item + .sort-item {
    margin-left: 8px;
  }
  .van-icon-sort:after {
    content: '\e721';
  }
  .cancel-btn {
    cursor: pointer;
    font-size: 14px;
    color: #999999;
  }
</style>

<style>
  .filter-item + .filter-item {
    margin-top: 10px;
  }
</style>
